<template>
  <div>
    <Row type="flex" :gutter="20" justify="space-between">
      <Col span="8">
        <div >
          <!--        <Scroll height="600px" >-->
          <Card >
            <div style="height: 600px;overflow: auto">
              <Tree :data="data6" :render="renderContent" :load-data="loadData" @on-select-change="getAreaInfo" class="demo-tree-render"></Tree>
            </div>
          </Card>
          <!--        </Scroll>-->
        </div>
      </Col>
      <Col span="16">
        <Card>
          <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex"  name="tab1" >
            <TabPane v-if="this.companyCode === this.paramData2.company_code" label="基本信息" name="list" tab="tab1">
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">统一社会信用代码:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.succ" class="div-search" placeholder="请输入统一社会信用代码"></Input>
                </Col>
              </Row>
              <!--      所在区县、街道-->
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">组织名称:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.name" class="div-search" placeholder="请输入组织名称"></Input>
                </Col>
              </Row>
              <!--      机构类型-->
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">机构类型:</Col>
                <Col span="10" offset="1">
                  <RadioGroup v-model="paramData.organization_type">
                    <Radio label="1">村民委员会</Radio>
                    <Radio label="2">居民委员会</Radio>
                  </RadioGroup>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">详细地址（住所）:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.address" class="div-search" placeholder="请输入详细地址（住所）"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">原组织机构代码:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.old_company_code" class="div-search" placeholder="请输入原组织机构代码"></Input>
                </Col>
              </Row>
              <!--有效期限开始、结束   核准日期-->
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">有效期限（始）:</Col>
                <Col span="10" offset="1">
                  <DatePicker type="date"  v-model="paramData.start_time" :transfer=true></DatePicker>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">有效期限（终）:</Col>
                <Col span="10" offset="1">
                  <DatePicker type="date"  v-model="paramData.end_time" :transfer=true></DatePicker>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">核准日期:</Col>
                <Col span="10" offset="1">
                  <DatePicker type="date"  v-model="paramData.approval_time" :transfer=true></DatePicker>
                </Col>
              </Row>
              <Divider>法人信息</Divider>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">法人:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.contacts" class="div-search" placeholder="请输入联系人"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">联系方式:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.mobile" class="div-search" placeholder="请输入联系电话"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">证件号码:</Col>
                <Col span="10" offset="1">
                  <Input v-model="paramData.card_no" class="div-search" placeholder="请输入联系电话"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">民族:</Col>
                <Col span="10" offset="1">
                  <Select v-model="paramData.CPBI007" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[4]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
                  </Select>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">党员:</Col>
                <Col span="10" offset="1">
                  <RadioGroup v-model="paramData.party_member">
                    <Radio label="1">是</Radio>
                    <Radio label="0">否</Radio>
                  </RadioGroup>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">学历:</Col>
                <Col span="10" offset="1">
                  <Select v-model="paramData.CPEI004" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
                  </Select>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">兼任书记:</Col>
                <Col span="10" offset="1">
                  <RadioGroup v-model="paramData.secretary">
                    <Radio label="1">是</Radio>
                    <Radio label="0">否</Radio>
                  </RadioGroup>
                </Col>
              </Row>
              <div style="margin-left: 15rem">
                <Button type="primary" @click="createCommunityInfo()" icon="">保存</Button>
              </div>
            </TabPane>
            <TabPane v-if="this.companyCode != this.paramData2.company_code" label="基本信息" name="list" tab="tab1">
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">统一社会信用代码:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.succ" class="div-search" placeholder="请输入统一社会信用代码"></Input>
                </Col>
              </Row>
              <!--      所在区县、街道-->
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">组织名称:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.name" class="div-search" placeholder="请输入组织名称"></Input>
                </Col>
              </Row>
              <!--      机构类型-->
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">机构类型:</Col>
                <Col span="10" offset="1">
                  <RadioGroup v-model="paramData.organization_type">
                    <Radio disabled label="1">村民委员会</Radio>
                    <Radio disabled label="2">居民委员会</Radio>
                  </RadioGroup>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">详细地址（住所）:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.address" class="div-search" placeholder="请输入详细地址（住所）"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">原组织机构代码:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.old_company_code" class="div-search" placeholder="请输入原组织机构代码"></Input>
                </Col>
              </Row>
              <!--有效期限开始、结束   核准日期-->
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">有效期限（始）:</Col>
                <Col span="10" offset="1">
                  <DatePicker type="date" disabled v-model="paramData.start_time" :transfer=true></DatePicker>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">有效期限（终）:</Col>
                <Col span="10" offset="1">
                  <DatePicker disabled type="date"  v-model="paramData.end_time" :transfer=true></DatePicker>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">核准日期:</Col>
                <Col span="10" offset="1">
                  <DatePicker disabled type="date"  v-model="paramData.approval_time" :transfer=true></DatePicker>
                </Col>
              </Row>
              <Divider>法人信息</Divider>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">法人:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.contacts" class="div-search" placeholder="请输入联系人"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">联系方式:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.mobile" class="div-search" placeholder="请输入联系电话"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">证件号码:</Col>
                <Col span="10" offset="1">
                  <Input disabled v-model="paramData.card_no" class="div-search" placeholder="请输入联系电话"></Input>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">民族:</Col>
                <Col span="10" offset="1">
                  <Select disabled v-model="paramData.CPBI007" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[4]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
                  </Select>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">党员:</Col>
                <Col span="10" offset="1">
                  <RadioGroup v-model="paramData.party_member">
                    <Radio disabled label="1">是</Radio>
                    <Radio disabled label="0">否</Radio>
                  </RadioGroup>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">学历:</Col>
                <Col span="10" offset="1">
                  <Select disabled v-model="paramData.CPEI004" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
                  </Select>
                </Col>
              </Row>
              <Row class="item1">
                <Col span="7" style="text-align: right" class="">兼任书记:</Col>
                <Col span="10" offset="1">
                  <RadioGroup v-model="paramData.secretary">
                    <Radio disabled label="1">是</Radio>
                    <Radio disabled label="0">否</Radio>
                  </RadioGroup>
                </Col>
              </Row>
<!--              <div style="margin-left: 15rem">-->
<!--                <Button type="primary" @click="createCommunityInfo()" icon="">保存</Button>-->
<!--              </div>-->
            </TabPane>
            <TabPane label="历届信息" name="visaList" tab="tab1">
              <Table stripe :columns="columns2" :data="data2"></Table>
            </TabPane>
          </Tabs>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getAuditSysOfficeList, getTypeNameList, getCommunityInfo, getOffice, getSessionList, date2str, createCommunityInfo } from '@/api/eventlist'
export default {
  data() {
    return {
      data2: [],
      data6: [],
      mailList1: [],
      mailList2: [],
      mailList3: [],
      dictList: [],
      tabIndex: 0,
      paramData: {},
      paramData2: {},
      columns2: [
        { title: '序号', type: 'index', width: 50, align: 'center'},
        { title: '法人姓名', key: 'contacts', minWidth: 90, align: 'center' },
        { title: '证件号码', key: 'card_no', minWidth: 90, align: 'center' },
        { title: '联系方式', key: 'mobile', minWidth: 90, align: 'center' },
        { title: '有效期（始）', key: 'start_time', minWidth: 90, align: 'center' },
        { title: '有效期(终)', key: 'end_time', minWidth: 90, align: 'center' },
        { title: '民族', key: 'nation', minWidth: 90, align: 'center' },
        { title: '党员', key: 'party_member', minWidth: 90, align: 'center' },
        { title: '学历', key: 'education', minWidth: 90, align: 'center' },
        { title: '党组织书记', key: 'secretary', minWidth: 90, align: 'center' }
      ]
    }
  },
  methods: {
    init (param) {
      getAuditSysOfficeList(param).then(ret => {
        //   console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          this.data6 = this.getTree(ret.data.data.result)
        }
      })
    },
    renderContent (h, { root, node, data }) {
      let gradename = ''
      if (data.grade !== undefined) {
        if (data.grade === '3') {
          gradename = '区县'
        } else if (data.grade === '4' && data.type === '1') {
          gradename = '街道'
        } else if (data.grade === '4' && data.type === '2') {
          gradename = '乡镇'
        } else if (data.grade === '5' && data.type === '1') {
          gradename = '社区'
        } else if (data.grade === '5' && data.type === '2') {
          gradename = '农村'
        }
      }
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('span', gradename),
          h('Icon', {
            props: {
              type: 'ios-paper-outline'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title),
        ])
      ])
    },
    loadData (item, callback) {
      let param = {
        grade: parseInt(item.grade) + 1,
        parent_ids: item.parent_ids + item.id + ','
      }
      if (item.grade === '3') {
        this.county = item.title
      } else if (item.grade === '4') {
        this.street = item.title
      }
      let data = []
      getAuditSysOfficeList(param).then(ret => {
        //  console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          data = this.getTree(ret.data.data.result)
          callback(data)
        }
      })
    },
    getAreaInfo (val) {
      if (val.length < 1) {
        return
      }
      let grade = val[0].grade
      this.grade = grade
      this.community = val[0].title
      if (val[0].title.toString().indexOf('街道') !== -1) {
        let index = val[0].title.toString().lastIndexOf('街道')
        let end = val[0].title.toString().length
        this.sqmc = val[0].title.toString().substring(index + 2, end)
      } else {
        this.sqmc = val[0].title.toString()
      }
      let param = {
        company_id: val[0].id
      }
      this.upCpmpanyInfo = val[0]
      console.log('当前选择机构', this.upCpmpanyInfo)
      if (this.upCpmpanyInfo.grade === '5') {
        this.paramData = {}
        this.paramData2.ID = this.upCpmpanyInfo.id
        this.paramData2.company_code = this.upCpmpanyInfo.code
        this.getCommunityInfo(this.upCpmpanyInfo)
        this.getSession(this.upCpmpanyInfo)
      }
    },
    getTree (tree) {
      //  console.log(tree)
      let arr = []
      tree.forEach(item => {
        let obj = {
          title: item.name,
          id: item.id,
          parent_ids: item.parent_ids,
          grade: item.grade,
          code: item.code,
          children: [],
          loading: false,
          type: item.type
        }
        arr.push(obj)
      })
      //  console.log(arr)
      return arr
    },
    tabChange () {
    },
    getCommunityInfo(item) {
      console.log(this.paramData, '000000')
      getCommunityInfo(item).then(res => {
        if (res.data.errcode === 0) {
          this.paramData = res.data.data
        }
      })
    },
    createCommunityInfo() {
      this.paramData.start_time = date2str(this.paramData.start_time)
      this.paramData.end_time = date2str(this.paramData.end_time)
      this.paramData.approval_time = date2str(this.paramData.approval_time)
      this.paramData.ID = this.paramData2.ID
      this.paramData.company_code = this.paramData2.company_code
      createCommunityInfo(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功' })
          this.init()
          this.getAreaInfo()
        } else {
          this.$Notice.error({ title: '保存失败', desc: '' })
        }
      })
    },
    getSession(item) {
      let that = this
      console.log(item)
      item.ID = item.id
      getSessionList(item).then(res => {
        if (res.data.errcode === 0) {
          this.getTypeName('nation', 4)
          this.getTypeName('degree', 7)
          res.data.data.forEach(function (item) {
            that.dictList[4].forEach(function (index) {
              if (item.CPBI007 === index.TYPECODE) {
                item.nation = index.TYPENAME
              }
            })
            that.dictList[7].forEach(function (index) {
              if (item.CPEI004 === index.TYPECODE) {
                item.education = index.TYPENAME
              }
            })
          })
          this.data2 = res.data.data
        }
      })
    },
    getTypeName (id, index) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList[index] = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getDictList () {
      // this.getTypeName('political', 0)
      // this.getTypeName('position', 1)
      // this.getTypeName('cpbi018', 2)
      // this.getTypeName('marriage', 3)
      this.getTypeName('nation', 4)
      // this.getTypeName('incumbency', 5)
      // this.getTypeName('sp_status', 6)
      this.getTypeName('degree', 7)
      // this.getTypeName('academic', 8)
      // this.getTypeName('lineal', 9)
      // this.getTypeName('pqoswt', 10)
      // this.getTypeName('train', 11)
      // this.getTypeName('examType', 12)
      // this.getTypeName('examresult', 13)
    },
    getMailList (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList1 = res.data.data
          let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
          this.mailList1.push(xiehui)
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList2 (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList2 = res.data.data
            let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
            this.mailList2.push(xiehui)
          } else if (grade === 5) {
            this.mailList3 = res.data.data
          }
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted() {
    let companyGrade = this.companyGrade
    let param = {
      grade: ++companyGrade,
      // grade: 3,
      parent_id: this.$store.state.user.severUserInfo.company_id
    }
    this.init(param)
    this.getDictList()
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    },
    companyGrade () {
      return this.$store.state.user.severUserInfo.company_grade
    }
  },
}
</script>
<style>
  .item1{
    height: 42px;
    line-height: 40px;
  }
</style>
